<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" >
<title>Insert title here</title>
 <script  th:src="@{/js/jquery-1.8.3.min.js}"></script>
 <script  th:src="@{/js/echarts.js}"></script>
 
</head>
<body>
	<input type="button" value="显示" onclick="loadDrugs()"/>
	<div id="main2" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
    //图表
    var myChart = echarts.init(document.getElementById("main2"));
    function loadDrugs() {
    	myChart.clear();
    	myChart.showLoading({text: '正在努力的读取数据中...'});
        $.getJSON('/echarys/d3', function (data) {
        	var option = {
        		    title : {
        		        text: '某站点用户访问来源',
        		        subtext: '纯属虚构',
        		        x:'center'
        		    },
        		    tooltip : {
        		        trigger: 'item',
        		        formatter: "{a} <br/>{b} : {c} ({d}%)"
        		    },
        		    legend: {
        		        orient: 'vertical',
        		        bottom: 'bottom',
        		        data: data.legend
        		    },
        		    series : [
        		        {
        		            name: '访问来源',
        		            type: 'pie',
        		            radius : '55%',
        		            center: ['50%', '60%'],
        		            data:data.data,
        		            itemStyle: {
        		                emphasis: {
        		                    shadowBlur: 10,
        		                    shadowOffsetX: 0,
        		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        		                }
        		            }
        		        }
        		    ]
        		};
        	 myChart.setOption(option);
        	 myChart.hideLoading();
        });
       
    }
 </script>
</body>
</html>